<template>
	<view style="min-height: 100%;position: relative;" :style="{'background-color': bgColor}">
		<image v-if="headerSrc" class="hearder-image" :src="headerSrc" mode="widthFix" />
		<view style="position: relative;top: 0;display: flex;flex-direction: column;">
			<slot></slot>
		</view>
		<image v-if="footerSrc" class="footer-image" :src="footerSrc" mode="widthFix" />
	</view>
</template>

<script setup>
	const props = defineProps({
		bgColor: {
			type: String,
			default: 'whitesmoke'
		},
		headerSrc: String,
		footerSrc: String,
	})
</script>

<style lang="scss" scoped>
	.hearder-image {
		height: auto;
		width: 100%;
		position: absolute;
		top: 0;
	}

	.footer-image {
		height: auto;
		width: 100%;
		position: absolute;
		bottom: 0;
	}
</style>

<style>
	page {
		height: 100%;
	}
</style>
